<!-- created by sunshine-lin in 2018.10.10 -->
<template>
  <div class="comBox"
       id="router">
    <router-link :to="{path: '/router/a',params:{label: 'aaa',value: 'aaaa'}}">aaa</router-link>
    <router-link :to="{path: '/router/b',props:{label: 'bbb',value: 'bbba'}}">bbb</router-link>
    <router-link :to="{path: '/router/c',props:{label: ' ccc',value: ' ccca'}}">ccc</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'router',
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  beforeRouteUpdate(to, from, next) {
    console.log('to',to)
    next()
    // react to route changes...
    // don't forget to call next()
  },
  activated() {
  },
  deactivated() {
  },
  watch: {},
  methods: {}
}
</script>

<style rel="stylesheet" lang="scss">
#router {
  .box {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    background: #f99;
    /*word-break: break-all;*/
  }
  .box1 {
    word-break: break-all;
  }
  .box2 {
    animation: resize 3s infinite both alternate;
  }
}
</style>
